<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>新建门店</title>
		<link rel="stylesheet" href="../../css/base.css" />
		<link rel="stylesheet" href="../../css/common.css" />
		<!-- Bootstrap Core CSS -->
		<link href="../../sbadmin/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
		<!-- MetisMenu CSS -->
		<link href="../../sbadmin/bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
		<!-- DataTables CSS -->
		<link href="../../sbadmin/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
		<!-- Custom CSS -->
		<link href="../../sbadmin/dist/css/sb-admin-2.css" rel="stylesheet">
		<!-- Custom Fonts -->
		<link href="../../sbadmin/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
		<script src="ul_file.js"></script>
		<link rel="stylesheet" href="../../css/jquery.datetimepicker.css" />
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
		<style>
			body {
				padding: 0 15px !important;
			}
			
			.file-style {
				filter: alpha(opacity=0);
				-moz-opacity: 0;
				-khtml-opacity: 0;
				opacity: 0;
				position: absolute;
				left: 0px;
				cursor: pointer;
				height: 130px;
				width: 360px;
				z-index: 3000;
			}
			
			.setup-img {
				width: 360px;
				height: 130px;
			}
		</style>
	</head>

	<body style="background:#FFF;">
		<div class="comm-tt-font pr">
			门店信息 > 新建门店
		</div>
		<div class="zl-ccbox" style="margin-top: 20px;">
			<div class="zl-cccc pr">
				<div class="edit-item clb">
					<div class="edit-item-tt fl"><em>*</em>门店编号：</div>
					<div class="edit-item-cc fl ml10">
						<input type="text" class="edit-input" id="shopId" />
					</div>
				</div>
				<div class="edit-item clb">
					<div class="edit-item-tt fl"><em>*</em>门店名：</div>
					<div class="edit-item-cc fl ml10">
						<input type="text" class="edit-input" id="shopName" />
					</div>
				</div>
				<div class="edit-item clb">
					<div class="edit-item-tt fl"><em>*</em>城市：</div>
					<div class="edit-item-cc fl ml10 pr">
						<select class="eic-select" style="width: 200px;" id="ctName"></select>
					</div>
				</div>
				<div class="edit-item clb">
					<div class="edit-item-tt fl"><em>*</em>区域：</div>
					<div class="edit-item-cc fl ml10">
						<select class="eic-select" style="width: 200px;" id="areaName">
							<option>--请选择--</option>
						</select>
					</div>
				</div>
				<div class="edit-item clb">
					<div class="edit-item-tt fl"><em>*</em>电话：</div>
					<div class="edit-item-cc fl ml10">
						<input type="text" class="edit-input" id="shopTel" />
					</div>
				</div>
				<div class="edit-item clb">
					<div class="edit-item-tt fl"><em>*</em>详细地址：</div>
					<div class="edit-item-cc fl ml10">
						<input type="text" class="edit-input" id="shopAddr" />
					</div>
				</div>
				<div class="edit-item clb">
					<div class="edit-item-tt fl"><em>*</em>门店类型：</div>
					<div class="edit-item-cc fl ml10">
						<ul class="shop-type clb mt5" id="shopType">

						</ul>
					</div>
				</div>
				<div class="edit-item clb">
					<div class="edit-item-tt fl"><em>*</em>营业时间：</div>
					<div class="edit-item-cc fl ml10">
						<input type="text" class="edit-input" style="width: 100px;" id="startTime" />
						<label style="vertical-align: middle;margin: 0 5px;color:#787878;font-weight: normal;">至</label>
						<input type="text" class="edit-input" style="width: 100px;" id="endTime" />
					</div>
				</div>
				<div class="edit-item clb">
					<div class="edit-item-tt fl"><em>*</em>拍摄场景：</div>
					<div class="edit-item-cc fl ml10">
						<ul class="shop-type clb mt5" id="shopPj">
							<li code="1">内景</li>
							<li code="10">外景</li>
							<li code="100">街拍</li>
						</ul>
					</div>
				</div>
				<div class="wo-form-item clb mt20">
					<div class="wo-form-itemtt fl" style="width: 90px;text-align: right;">门店介绍：</div>
					<div class="wod-form-itemcc fl ml10" style="width: 620px;">
						<textarea class="ed-textarea" id="shopIntroduce"></textarea>
					</div>
				</div>
				<div class="wo-form-item clb mt20">
					<div class="wo-form-itemtt fl" style="width: 90px;text-align: right;">门店图片：</div>
					<div class="wod-form-itemcc fl ml10 pr" style="width: 360px;">
						<input type="file" class="file-style" id="file" onchange="xmTanUploadImg(this)" />
						<img id="xmTanImg" src="../../img/addShop.png" class="setup-img" />
						<input type="hidden" id="imghidden" value="" />
					</div>
					<div class="fl" style="margin-top: 50px;">
						(建议尺寸718*260)
					</div>
				</div>
				<div class="edit-item clb mt20">
					<div class="edit-item-tt fl"></div>
					<div class="edit-item-cc fl ml10">
						<a href="personalMsg.html" class="fl commqx-btn">取消</a>
						<a href="javascript:void(0)" id="addShop" class="fl commqr-btn ml15">确定</a>
					</div>
				</div>
			</div>
		</div>

		<!-- jQuery -->
		<script src="../../sbadmin/bower_components/jquery/dist/jquery.min.js"></script>
		<!-- Bootstrap Core JavaScript -->
		<script src="../../sbadmin/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<!-- Metis Menu Plugin JavaScript -->
		<script src="../../sbadmin/bower_components/metisMenu/dist/metisMenu.min.js"></script>
		<!-- DataTables JavaScript -->
		<script src="../../sbadmin/bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
		<script src="../../sbadmin/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
		<!-- Custom Theme JavaScript -->
		<script src="../../sbadmin/dist/js/sb-admin-2.js"></script>
		<script src="../../js/layer/layer.js"></script>
		<script type="text/javascript" src="../../js/common.js"></script>
		<script type="text/javascript" src="../../js/jquery.datetimepicker.full.js"></script>
		<!-- Page-Level Demo Scripts - Tables - Use for reference -->
	</body>
	<script>
		$.datetimepicker.setLocale('ch');
		$('#startTime').datetimepicker({
			datepicker: false,
			format: 'H:i',
			step: 30
		});
		$('#endTime').datetimepicker({
			datepicker: false,
			format: 'H:i',
			step: 30
		});

		//会员卡照片
		var img = document.getElementById("xmTanImg");

		function xmTanUploadImg(obj) {
			$("#ttt").css("display", "none");
			var file = obj.files[0];
			var reader = new FileReader();
			//读取文件过程方法
			reader.onloadstart = function(e) {
				console.log("开始读取....");
			}
			reader.onprogress = function(e) {
				console.log("正在读取中....");
			}
			reader.onabort = function(e) {
				console.log("中断读取....");
			}
			reader.onerror = function(e) {
				console.log("读取异常....");
			}
			reader.onload = function(e) {
				console.log("成功读取....");
				img.src = e.target.result;
				// 保存会员照片
				localStorage.setItem("memberPhone", img.src);
				var icinmguuii = document.getElementsByClassName("ic-inmguuii")[0];
				//icinmguuii.style.display = "block";
				//或者 img.src = this.result;  //e.target == this
			}
			reader.readAsDataURL(file);
			applyTokenDo(uploadFile);
		}
		//获取全部城市
		$.ajax({
			url: "https://order.wz1996.wang/wzbg/openedcity/all",
			type: 'get',
			contentType: 'application/json',
			beforeSend: function(request) {
				request.setRequestHeader("token", localStorage.getItem("token"));
			},
			success: function(data) {
				console.log(data);
				//登录状态
				var html = "";
				if(data.code == "1") {
					html += "<option>--请选择--</option>"
					for(var i = 0; i < data.data.length; i++) {
						html += "<option id=" + data.data[i].cityId + " value=" + data.data[i].cityId + ">" + data.data[i].cityName + "</option>"
					}
					$("#ctName").html(html);
				} else if(data.code == "-1") {
					layar(data.msg);
					setTimeout("window.parent.frames.location.href='/xcxadmin/login.html'", 1000)
				} else {
					layar(data.msg);
				}
			},
			error: function(e) {
				errcode(e);
			}
		});
		//获取全部城市下的区域
		$("#ctName").change(function() {
			var html = "";
			if($("#ctName option:selected").html() == "--请选择--") {
				html += "<option>--请选择--</option>"
				$("#areaName").html(html);
			} else {
				var id = $("#ctName option:selected").attr("id");
				var post_data = {
					"upid": id
				}
				$.ajax({
					url: "https://order.wz1996.wang/wzbg/area/query",
					type: 'post',
					contentType: 'application/json',
					data: JSON.stringify(post_data),
					beforeSend: function(request) {
						request.setRequestHeader("token", localStorage.getItem("token"));
					},
					success: function(data) {
						console.log(data);
						if(data.code == "1") {
							for(var i = 0; i < data.data.length; i++) {
								html += "<option id=" + data.data[i].id + " value=" + data.data[i].id + ">" + data.data[i].name + "</option>"
							}
							$("#areaName").html(html);
						} else if(data.code == "-1") {
							layar(data.msg);
							setTimeout("window.parent.frames.location.href='/xcxadmin/login.html'", 1000)
						}

					},
					error: function(e) {
						errcode(e);
					}
				});
			}

		})
		//获取门店类型
		$.ajax({
			url: "https://order.wz1996.wang/wzbg/store/types",
			type: 'get',
			contentType: 'application/json',
			beforeSend: function(request) {
				request.setRequestHeader("token", localStorage.getItem("token"));
			},
			success: function(data) {
				console.log(data);
				if(data.code == "1") {
					var typeHtml = "";
					for(var i = 1; i < data.data.length; i++) {
						typeHtml += "<li id=" + data.data[i].id + ">" + data.data[i].name + "</li>";
					}
					$("#shopType").html(typeHtml);
				} else if(data.code == "-1") {
					layar(data.msg);
					setTimeout("window.parent.frames.location.href='/xcxadmin/login.html'", 1000)
				} else {
					layar(data.msg);
				}
			},
			error: function(e) {
				errcode(e);
			}
		});

		function remove(arr, val) {
			var index = arr.indexOf(val);
			if(index > -1) {
				arr.splice(index, 1);
			}
		}
		var shopType = []; //门店类型
		$("#shopType").on("click", "li", function() {
			var hasClass = $(this).hasClass("cur");
			var th = {};
			if(hasClass) {
				$(this).removeClass("cur");
				for(var i = 0; i < shopType.length; i++) {
					if(shopType[i].id == $(this).attr("id")) {
						shopType.splice(i, 1);
						i--;
					}
				}
				//remove(shopType, $(this).attr("id"))
			} else {
				$(this).addClass("cur");
				th['id'] = $(this).attr("id");
				shopType.push(th);
				//shopType.push($(this).attr("id"))
			}
		})

		var shopPj = Number();
		$("#shopPj li").click(function() {
			var hasClass = $(this).hasClass("cur");
			if(hasClass) {
				$(this).removeClass("cur");
				shopPj -= Number($(this).attr("code"));
			} else {
				$(this).addClass("cur");
				shopPj += Number($(this).attr("code"));
			}
		})
		$("#addShop").click(function() {
			if(shopType == "" || shopType == null || shopType == undefined) {
				layar("请选择门店类型！");
			}
			if(shopPj == "") {
				layar("请选择拍摄场景！");
			}
			var shopId = $("#shopId").val();
			var shopName = $("#shopName").val();
			var cityId = $("#ctName option:selected").val();
			var cityName = $("#ctName option:selected").html();
			var districtId = $("#areaName option:selected").val();
			var districtName = $("#areaName option:selected").html();
			var shopTel = $("#shopTel").val();
			var shopAddr = $("#shopAddr").val();
			var shopTime = $("#startTime").val() + " - " + $("#endTime").val();
			var shopIntroduce = $("#shopIntroduce").val();
			var shopImg = $("#imghidden").val();
			var post_data = {
				"store": {
					"address": shopAddr,
					"cityId": cityId,
					"cityName": cityName,
					"code": shopId,
					//"createTime": "",
					"districtId": districtId,
					"districtName": districtName,
					//"id": 0,
					"imageUrl": shopImg,
					"introduction": shopIntroduce,
					"name": shopName,
					"openingHours": shopTime,
					"phone": shopTel,
					"specialty": shopPj
				},
				//"updateTime": ""
				"storeType": shopType
			};
			console.log(post_data)
			$.ajax({
				url: "https://order.wz1996.wang/wzbg/store/add",
				type: 'post',
				contentType: 'application/json',
				data: JSON.stringify(post_data),
				beforeSend: function(request) {
					request.setRequestHeader("token", localStorage.getItem("token"));
				},
				success: function(data) {
					console.log(data);
					if(data.code == "1") {
						layar("新建成功！");
						setTimeout("window.location.href='list.html'", 1000)
					} else if(data.code == "-1") {
						layar(data.msg);
						setTimeout("window.parent.frames.location.href='/xcxadmin/login.html'", 1000)
					} else {
						layar(data.msg);
					}
				},
				error: function(e) {
					errcode(e);
				}
			});

		})
	</script>

</html>